import React from 'react'
import userSearchStore from '../../store/userSearchStore'
import { observer } from 'mobx-react'

function Main() {

  const {firstView, loading, errorMsg, users} = userSearchStore

  if (firstView) {
    return <h2>请输入关键字进行搜索</h2>
  } else if (loading) {
    return <h2>请求中...</h2>
  } else if (errorMsg) {
    return <h2>{errorMsg}</h2>
  }
  return (
    <div className="row">
      {
        users.map(user => (
          <div className="card" key={user.name}>
            <a href={user.url} target="_blank" rel="noreferrer">
              <img src={user.avatar_url} alt="" style={{width: 100}} />
            </a>
            <p className="card-text">{user.name}</p>
          </div>
        ))
      }
    </div>
  )
}

export default observer(Main)